<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">{{login_title}}</div>
			<el-form v-show="login_type === 'username'" :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="用户名">
						<template #prepend>
							<el-button icon="el-icon-user"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="密码" v-model="param.password"
					          @keyup.enter="submitForm()">
						<template #prepend>
							<el-button icon="el-icon-lock"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm()">登录</el-button>
				</div>
				<p class="login-tips">切换方式 :
					<span class="iconfont wechat" @click="changeType('wechat')">&#xe640;</span>
					<span class="iconfont qq" @click="oauthLogin('qq')">&#xe62e;</span>
				</p>
			</el-form>
			<el-form v-show="login_type === 'wechat'" :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<div class="login-wechat">
					<div v-show="expired" class="expired">
						已失效
					</div>
					<QrcodeVue :value="qrtext" :size="size" level="H" :margin="3"></QrcodeVue>
				</div>
				<p class="login-tips">切换方式 : <span class="normal" @click="changeType('username')">账号密码登录</span> </p>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading,ElButton,ElForm,ElFormItem,ElInput } from "element-plus";
import request from "../utils/request"
import QrcodeVue from "qrcode.vue"
import config from "../utils/config";
const store = useStore();
const login_type = ref('username')
const login_title = ref('登录')
const size = ref(225);
const qrtext = ref('');
const expired = ref(false)
let clock = 0
let timer = null
let loading = null
const loadingStart = () => {
	loading = ElLoading.service({
		lock: true,
		text: '正在验证...',
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0)',
	})
}

let qrkey = ''
let qrvalue = ''
const getQrcode = () => {
	request.get('login/getQrcode').then(res => {
		qrtext.value = res.data.url
		qrkey = res.data.key
		qrvalue = res.data.value
		clock = 0
		timer = setInterval(() => {
			clock++
			checkQrcodeState()
			if(clock > 60) {
				expired.value = true
				clearInterval(timer)
			}
		},1500)
	}).catch(err => {
		console.log(err)
	})
}

const checkQrcodeState = () => {
	request.post('/blog/login/checkQrcodeState',{key:qrkey,value:qrvalue}).then(res => {
		if(res.data.login === 1) {
			clearInterval(timer)
			let token = res.data.token
			return request.post('/blog/User/userInfo',{token:token,login:'login'}).then(res => {
				localStorage.setItem('web_uid',res.data.id)
				localStorage.setItem('web_nickname',res.data.nickname)
				localStorage.setItem('web_avatar',res.data.avatar)
				localStorage.setItem('web_token',res.data.token)
				localStorage.setItem('web_last_refresh_time',new Date().getTime()/1000)
				router.push("/")
			})
		}
	}).catch(err => {
		console.log(err)
		clearInterval(timer)
	})
}

const changeType = (type) => {
	if(type === login_type.value) {
		return
	}
	if(type === 'username') {
		login_type.value = 'username'
		login_title.value = '登录'
		clearInterval(timer)
		getQrcode()
	}else if(type === 'wechat') {
		login_type.value = 'wechat'
		login_title.value = '微信扫码'
		clearInterval(timer)
		getQrcode()
	}
}

const oauthLogin = (type) => {
	let backurl = window.location.origin + '/web/home'
	if(type === 'qq') {
		window.location.href = config.baseUrl + '/blog/qq/oauth?backurl=' + encodeURIComponent(backurl)
	}
}

const router = useRouter();
const param = reactive({
	username: "",
	password: "",
});
const rules = {
	username: [{required: true, message: "请输入用户名", trigger: "blur",},],
	password: [{ required: true, message: "请输入密码", trigger: "blur" },],
};
const login = ref(null);
const submitForm = () => {
	login.value.validate((valid) => {
		if (valid) {
			let data = {
				username: param.username,
				password: param.password,
			}
			request.post('/blog/login/login',data).then(res => {
				ElMessage.success("登录成功")
				// console.log(res)
				localStorage.setItem('web_uid',res.data.admin_id)
				localStorage.setItem('web_avatar',res.data.avatar)
				localStorage.setItem('web_token',res.data.token)
				localStorage.setItem('web_last_refresh_time',new Date().getTime()/1000)
				loading.close()
				router.push("/")
			}).catch(err => [
				console.log((err))
			])
		} else {
			return false;
		}
	});
};

</script>
<style scoped lang="scss">
@import "../assets/aliiconfont/iconfont.css";
.login-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	//background-image: url('https://sekiro.oss-cn-beijing.aliyuncs.com/static/game/nier2b.jpg');
	background-size: cover;
	background-position: center center;
}
.ms-login {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 350px;
	margin: -190px 0 0 -175px;
	border-radius: 5px;
	background: rgba(17, 17, 17, 0.3);
	overflow: hidden;
	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		border-bottom: 1px solid #ddd;
	}
	.ms-content {
		padding: 30px 30px;
	}
	.login-btn {
		text-align: center;
	}
	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}
	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #eee;
	}
}


.alipay {
	color: #1576fe;
}
.wechat {
	font-size: 35px;
	cursor: pointer;
	margin: 0 8px;
}
.qq {
	font-size: 35px;
	cursor: pointer;
	margin: 0 8px;
}
.normal {
	font-size: 16px;
	cursor: pointer;
}
.login-wechat {
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
	.expired {
		width: 226px;
		height: 225px;
		position: absolute;
		left: 32px;
		color: #fff;
		font-size: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(7,17,27,0.3);
		cursor: pointer;
	}
}
</style>
